<template>
	<view class="content">
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="d_item">
					<text class="d_item_left">行程类型：</text>
					<text class="d_item_right">{{applyDetails.leaveType}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">开始时间：</text>
					<text class="d_item_right">{{applyDetails.leaveStartTime}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">结束时间：</text>
					<text class="d_item_right">{{applyDetails.leaveEndTime}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">天数：</text>
					<!-- <text class="d_item_right">{{applyDetails.leaveDay}}天</text> -->
					<text class="d_item_right">{{calculate(applyDetails.leaveStartTime, applyDetails.leaveEndTime)}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">是否外出：</text>
					<text class="d_item_right">{{applyDetails.isLeaveOut?'是':'否'}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">事由：</text>
					<text class="d_item_right r_txt">{{applyDetails.leaveCause}}</text>
				</view>
			</custom-card>
		</view>
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="d_item">
					<text class="d_item_left">审核状态：</text>
					<view class="d_item_right">
						<image class="result_icon" :src="applyDetails.leaveResult == 0?'/static/images/appling.png':applyDetails.leaveResult == 1?'../../static/images/agree.png':'../../static/images/not_agree.png'" mode="scaleToFill"></image>
						<text>{{applyDetails.leaveResult == 0?'审批中':applyDetails.leaveResult == 1?'审批通过':'审批拒绝'}}</text>
					</view>
				</view>
				<view class="d_item" v-if="applyDetails.leaveApprove!=null">
					<text class="d_item_left">审批说明：</text>
					<text class="d_item_right r_txt">{{applyDetails.leaveApprove}}</text>
				</view>
			</custom-card>
		</view>
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="d_item">
					<text class="d_item_left">申请时间：</text>
					<text class="d_item_right">{{applyDetails.fillTime}}</text>
				</view>
			</custom-card>
		</view>
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="d_item">
					<text class="d_item_left">审批进度：</text>
				</view>
				<view class="d_item">
					<uni-steps direction="column" :options="steps" :active="current" :active-color="activeColor"></uni-steps>
				</view>
			</custom-card>
		</view>
	</view>
</template>

<script>
	let _this
	import {
		getActivityInfo //审批进度
	} from '../../common/api/index.js';
	import {
		datediff
	} from '../../common/js/util.js'
	export default {
		data() {
			return {
				applyDetails: {},
				steps: [],
				current: 0,
				activeColor: '#FA6400',
				empId: '',
				orgId: '',
			}
		},
		onLoad(option) {
			_this = this
			this.applyDetails = JSON.parse(decodeURIComponent(option.detail).replace(/&nbsp;/ig, ""))
			_this.empId = option.empId
			_this.orgId = option.orgId
			_this._getActivityInfo()
		},
		methods: {
			_getActivityInfo() {
				getActivityInfo({
					processId: _this.applyDetails.processId,
				}).then(res => {
					_this.steps = [{
						title: '请假发起人',
						desc: _this.applyDetails.empName
					}]
					if (res.code == 0 && res.data.length > 0) {
						_this.current = res.data.length
						res.data.forEach(item => {
							_this.steps.push({
								title: item.activityName,
								desc: (item.name ? item.name : '') +
									`(${item.approveType == 1 ? '同意' : item.approveType == 0 ? '不同意' : '审批中'})`
							})
						})
					}
					if (_this.applyDetails.leaveResult != 0) {
						_this.current = res.data.length + 1
						_this.steps.push({
							title: '申请结果',
							desc: _this.applyDetails.leaveResult == 1 ? '已通过' : '未通过'
						})
						_this.activeColor = _this.applyDetails.leaveResult == 1 ? '#55C976' : '#dd524d'
					}
				})
			},
		},
		computed: {
			calculate(start, end) {
				return function(start, end) {
					start = start.replace(/-/g, "/")
					end = end.replace(/-/g, "/")
					let diff = datediff(start, end)
					let jiaNum = diff % 1 * 24 >= 1 ? (diff % 1 * 24 >= 6 ? (Number.parseInt(diff) + 1) : (Number.parseInt(
					diff) + 0.5)) : Number.parseInt(diff)
					
					if (diff > 1) {
						return jiaNum + "天（" + Number.parseFloat(diff).toFixed(2) + "天）"
					}
					diff = diff * 24
					if (diff > 1) {
						return jiaNum + "天（" + Number.parseFloat(diff).toFixed(2) + "小时）"
					}
					diff = diff * 60
					if (diff > 1) {
						return Number.parseFloat(diff).toFixed(2) + "分钟"
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background-color: #f6f6f6;
		font-family: PingFang-SC-Heavy, PingFang-SC;
	}
	.content{
		height: 100%;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		overflow-y: auto;
		padding: 32rpx;
	}
	.d_box{
		margin-bottom: 20rpx;
	}
	.d_item {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		margin-bottom: 32rpx;
		
		&:last-child{
			margin-bottom: 0
		}
		
		.d_item_left {
			display: flex;
			flex: 0 0 170rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #6B707A;
		}
		.d_item_right {
			/* display: flex; */
			display: flex;
			flex-direction: row;
			align-items: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #3C424F;
		}
		
		.result_icon{
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}
		.r_txt {
			line-height: 50rpx;
		}
	}
</style>
